<template lang="pug">
  .upload-file-list-outer
    .mask(v-if="isLoadingActive")
    .loading-outer(v-if="isLoadingActive")
      LoadingWave(:active="isLoadingActive" color="primary")
    .file-list
      div.py-2(v-for="file in files")
        span.font-weight-bold.subtitle-1 {{file.name}}
        v-scroll-x-transition
          v-icon.ml-4(color="success" v-if="file.success && !file.warning") check
        v-scroll-x-transition
          v-icon.ml-4( dense color="warning" v-if="file.warning") mdi-alert
        span.text--accent-4.pl-4( v-if="file.warning") {{file.warning}}
        span.red--text.text-accent-4.pl-4( v-if="file.error") 上传失败
        v-btn.ml-4(icon small @click.prevent="$emit('remove', file)" v-if="!file.success")
          v-icon(dense) mdi-trash-can-outline
        v-progress-linear(v-if="file.active || file.progress !== '0.00'" :value="file.progress" height="8")
</template>

<script lang="ts">
  import Vue, {VueConstructor} from 'vue'
  import LoadingWave from '@/components/widgets/loading/loading_wave'

  export default (Vue as VueConstructor<Vue & {}>).extend({
    name: 'candidate_file_list',
    components: { LoadingWave },
    props: {
      files: Array
    },
    methods: {
      toggleLoading() {
        this.isLoadingActive = !this.isLoadingActive
      }
    },
    data() {
      return {
        isLoadingActive: false
      }
    }
  })
</script>

<style lang="scss">
  .upload-file-list-outer {
    position: relative;

    .mask {
      position: absolute;
      height: 100%;
      width: 100%;
      opacity: 0.1;
      z-index: 1;
      background-color: lightslategray;
    }

    .loading-outer {
      position: absolute;
      height: 100%;
      width: 100%;
      display: flex;
      justify-content: center;
      flex-direction: column;
      z-index: 2;
    }
  }
</style>